<template>
  <div class="basic-config">
    <div class="page-header">
      <h1>基础配置</h1>
      <p>配置系统的基本信息</p>
    </div>

    <el-card shadow="hover">
       <el-form :model="configForm" label-width="120px" style="max-width: 600px;">
        <el-form-item label="网站名称">
          <el-input v-model="configForm.siteName" />
        </el-form-item>
        <el-form-item label="网站Logo">
          <el-upload
            action="#"
            :show-file-list="false"
            :before-upload="handleLogoUpload"
          >
            <el-image v-if="configForm.logo" :src="configForm.logo" style="width: 100px; height: 100px;" />
            <el-button v-else>上传Logo</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="网站备案号">
          <el-input v-model="configForm.icp" />
        </el-form-item>
        <el-form-item label="客服邮箱">
          <el-input v-model="configForm.supportEmail" />
        </el-form-item>
         <el-form-item label="网站状态">
          <el-switch v-model="configForm.siteStatus" active-text="开放" inactive-text="关闭" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveConfig">保存配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

const configForm = reactive({
  siteName: '创意众筹平台',
  logo: 'https://via.placeholder.com/100x100/409EFF/FFFFFF?text=Logo',
  icp: '京ICP备20240001号',
  supportEmail: 'support@creativecrowdfunding.com',
  siteStatus: true,
});

const handleLogoUpload = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    configForm.logo = e.target.result;
  };
  reader.readAsDataURL(file);
  return false; // 阻止默认上传行为
};

const saveConfig = () => {
  ElMessage.success('配置已保存！');
};
</script>

<style scoped>
.basic-config { max-width: 1200px; margin: 0 auto; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { color: #666; }
</style> 